<template>
    <div class="mod-shop-notice">
        <avue-crud :data="dataList"
                   :option="tableOption"
                   :page="page"
                   :table-loading="dataListLoading"
                   @on-load="getDataList"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   ref="crud">

            <template slot="status"
                      slot-scope="scope">
                <el-tag size="small"
                        type="danger"
                        v-if="scope.row.status === 0">撤销
                </el-tag>
                <el-tag size="small"
                        v-else>公布
                </el-tag>
            </template>
            <template slot="isTop"
                      slot-scope="scope">
                <el-tag size="small"
                        v-if="scope.row.isTop === 0">否
                </el-tag>
                <el-tag size="small"
                        v-else>是
                </el-tag>
            </template>
            <template slot="menuLeft">

                <el-button @click="addOrUpdateHandle()"
                           icon="el-icon-plus"
                           size="small"
                           type="primary"
                           v-if="isAuth('shop:notice:save')">新增
                </el-button>
            </template>
            <template slot="menu"
                      slot-scope="scope">
                <el-button @click="addOrUpdateHandle(scope.row.id)"
                           icon="el-icon-edit"
                           size="small"
                           type="primary"
                           v-if="isAuth('shop:notice:update')">修改
                </el-button>
                <el-button @click.stop="deleteHandle(scope.row.id)"
                           icon="el-icon-delete"
                           size="small"
                           type="danger"
                           v-if="isAuth('shop:notice:delete')">删除
                </el-button>
            </template>

        </avue-crud>
        <add-or-update @refreshDataList="refreshChange"
                       ref="addOrUpdate"
                       v-if="addOrUpdateVisible"></add-or-update>
    </div>
</template>

<script>
    import {tableOption} from '@/crud/shop/notice'
    import AddOrUpdate from './notice-add-or-update'

    export default {
        data() {
            return {
                dataList: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                dataListLoading: false,
                tableOption: tableOption,
                permission: {
                    delBtn: this.isAuth('shop:notice:delete')
                },
                addOrUpdateVisible: false
            }
        },
        components: {
            AddOrUpdate
        },
        created() {
        },
        mounted() {
        },
        methods: {
            getDataList(page, params, done) {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/shop/notice/page'),
                    method: 'get',
                    params: this.$http.adornParams(Object.assign({
                        current: page == null ? this.page.currentPage : page.currentPage,
                        size: page == null ? this.page.pageSize : page.pageSize
                    }, params))
                }).then(({data}) => {
                    this.dataList = data.records
                    this.page.total = data.total
                    this.dataListLoading = false
                    if (done) {
                        done()
                    }
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            deleteHandle(id) {
                this.$confirm('确定进行删除操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/shop/notice/' + id),
                        method: 'delete',
                        data: this.$http.adornData({})
                    }).then(({data}) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    })
                }).catch(() => {
                })
            },
            /**
             * 刷新回调
             */
            refreshChange() {
                this.getDataList(this.page)
            },
            searchChange(params, done) {
                this.getDataList(this.page, params, done)
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
